<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户列表</title>
<link rel="stylesheet" href="<%=basePath %>layui/css/layui.css">
<script src="<%=basePath %>layui/layui.js" charset="utf-8"></script>
<script src="<%=basePath %>/backPage/js/jquery.min.js"></script>
</head>
<body>
<br/>
<!-- 条件查询 -->
<form class="layui-form" action="" onsubmit="return false;">
  <div class="layui-form-item"  style="margin-left: 130px;">
    <label class="layui-form-label">姓名</label>
    <div class="layui-input-inline">
      <input type="text" name="name"  placeholder="请输入姓名或关键字" autocomplete="off" class="layui-input">
    </div>
    <label class="layui-form-label">性别</label>
    <div class="layui-input-inline">
      <select name="gender"  autocomplete="off">
        <option value=""></option>
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
    </div>
    <label class="layui-form-label">是否管理员</label>
    <div class="layui-input-inline">
      <select name="isAdmin"  autocomplete="off">
        <option value=""></option>
        <option value="1">是</option>
        <option value="0">否</option>
      </select>
    </div>
    <div class="layui-input-inline">
      <button class="layui-btn" lay-submit lay-filter="serchBtn"><i class="layui-icon">&#xe615;</i>搜索</button>
    </div>
  </div>
</form>
<hr>

<table id="demo" lay-filter="test"></table>

<!-- 添加的表单 -->
<form id="A_form" class="layui-form" action="" onsubmit="return false;" style="display:none">
<br>
  <div class="layui-form-item">
    <label class="layui-form-label">姓名</label>
    <div class="layui-input-inline">
      <input type="text" name="name" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">性别</label>
    <div class="layui-input-inline">
      <select name="gender" lay-verify="required" autocomplete="off">
        <option value=""></option>
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
    </div>
  </div>
  <div class="layui-inline" style="margin-bottom: 10px;">
      <label class="layui-form-label">日期</label>
      <div class="layui-input-inline">
        <input type="text" style="width: 190px;" name="birthday" class="layui-input" id="A_date" placeholder="yyyy-MM-dd">
      </div>
  </div>
   <div class="layui-form-item">
    <label class="layui-form-label">头像</label>
    <div class="layui-input-inline">
      <input type="text" id="A_img" name="img" lay-verify="required"   placeholder="请输入图片路径" autocomplete="off" class="layui-input">
    </div><!-- lay-verify="required" -->
    <button type="button" class="layui-btn" id="A_imgUpload">
  		<i class="layui-icon">&#xe67c;</i>上传图片
	</button>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">电话</label>
    <div class="layui-input-inline">
      <input type="text" name="phone" required  lay-verify="required|phone" placeholder="请输入电话号" autocomplete="off" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-inline">
      <input type="password" name="loginPassword" required lay-verify="required|number" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">付款密码</label>
    <div class="layui-input-inline">
      <input type="password" name="payPassword" required lay-verify="required|number" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
     <label class="layui-form-label">是否管理员</label>
     <div class="layui-input-block">
         <input type="checkbox" name="isAdmin" lay-skin="switch" lay-text="是的|不是" >
     </div>
   </div>
 
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="addBtn">添加</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

<!-- 修改的表单 -->
<form id="U_form" lay-filter="U_form" class="layui-form" action="" onsubmit="return false;" style="display:none">
<br>
	<input type="hidden" name="id" />
  <div class="layui-form-item">
    <label class="layui-form-label">姓名</label>
    <div class="layui-input-inline">
      <input type="text" name="name"  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">性别</label>
    <div class="layui-input-inline">
      <select name="gender" lay-verify="required" autocomplete="off">
        <option value=""></option>
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
    </div>
  </div>
  <div class="layui-inline" style="margin-bottom: 10px;">
      <label class="layui-form-label">日期</label>
      <div class="layui-input-inline">
        <input type="text" id="U_date" style="width: 190px;" lay-verify="required" name="birthday" class="layui-input" placeholder="yyyy-MM-dd">
      </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">头像</label>
    <div class="layui-input-inline">
      <input type="text" id="U_img" name="img" lay-verify="required" placeholder="请输入图片路径" autocomplete="off" class="layui-input">
    </div>
    <button type="button" class="layui-btn" id="U_imgUpload">
  		<i class="layui-icon">&#xe67c;</i>上传图片
	</button>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">电话</label>
    <div class="layui-input-inline">
      <input type="text" name="phone" required  lay-verify="required|phone" placeholder="请输入电话号" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
     <label class="layui-form-label">是否管理员</label>
     <div class="layui-input-block">
         <input type="checkbox" name="isAdmin" lay-skin="switch" lay-text="是的|不是" >
     </div>
   </div>
  <input type="hidden" value="0" name="loginPassword" id="reset_password" />
  
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="updateBtn">修改</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      <button type="layui-btn" id="resetPasswordBtn" class="layui-btn layui-btn-danger">重置密码</button>
    </div>
  </div>
</form>
 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
 <%-- <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>--%>
</script>

<script type="text/html" id="imgTPL">
   <img src="<%=basePath%>{{d.img}}" onclick="hoverOpenImg()" style="width:30px;height:30px" /> 
</script>
<script>
function hoverOpenImg(){
    var img_show = null;
    $('td div img').hover(function(){
        var img = "<img class='img_msg' src='"+$(this).attr('src')+"' style='width:200px;' />";
        img_show = layer.tips(img, this,{
            tips:[2, 'rgba(255,255,255,1)']
            ,area: ['220px']
        });
    },function(){
        layer.close(img_show);
    });
}
</script>

<script type="text/html" id="switchLock">
    <input type="checkbox" data-id="{{d.id}}" name="status" lay-filter="isLockSwitch" lay-skin="switch" lay-text="已锁定|未锁定" {{d.isLock=="1" ? "checked":""}}>
</script>
<script type="text/html" id="switchAdmin">
    <input type="checkbox" data-id="{{d.id}}" name="status" lay-filter="isAdminSwitch" lay-skin="switch" lay-text="是的|不是" {{d.isAdmin=="0" ? "disabled":""}} {{d.isAdmin=="1" ? "checked":""}}>
</script>


<script type="text/javascript">

layui.use(['table','layer','form','upload','laydate'], function(){
	  var table = layui.table;
	  var layer = layui.layer;
	  var form = layui.form;
	  var $ = layui.$;
	  var upload = layui.upload;
	  var laydate = layui.laydate;
	  var currNow = 1; //声明一个全局变量存储当前页码
	  
	  laydate.render({
		    elem: '#A_date'
		});
	  laydate.render({
		    elem: '#U_date'
		});
	  
	  
	  //第一个实例
	  table.render({
	    elem: '#demo'
	    ,height: 565
	    ,url: '<%=basePath %>back/queryAllUser' //数据接口
	    ,page: true //开启分页
	    ,id:"showAll"
	    ,limits:[10,50,100]
	    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
	    ,done: function(res, curr, count){
	        //console.log(res.data);  //代表我们当前页的数据
	        
	        if(res.data==null){
	        	currNow = curr-1;  //如果当前页面没有数据了，就让页码-1
	        	//我们需要手动再重新刷新数据表格
	        	
	        	table.reload('showAll', {
		    			  where: { //设定异步数据接口的额外参数，任意设
		    			  }
		    			  ,page: {
		    			    curr: currNow //获取当前的页码
		    			  }
		    			}); //只重载数据
	        	
	        }else{
	        	currNow = curr;
	        }
	        
	      }
	    ,cols: [[ //表头
	    	{type: 'checkbox',}
	      ,{field: 'id', title: 'ID', width:80, sort: true}
	      ,{field: 'name', title: '姓名', width:80,sort: true}
	      ,{field: 'gender', title: '性别', width:80, sort: true}
	      ,{field: 'birthday', title: '出生日期', width:160,sort: true} 
	      ,{field: 'img', title: '头像', width: 150,sort: true,templet: '#imgTPL'}
	      ,{field: 'phone', title: '电话', width: 150,sort: true,}
	      ,{field: 'lastLoginTime', title: '最后登录时间', width: 180, sort: true}
	      ,{field: 'errorCount', title: '错误次数', width: 130, sort: true}
	      ,{field: 'isLock', title: '是否锁定', width: 130, toolbar:'#switchLock'}
	      ,{field: 'isAdmin', title: '是否管理员', width: 130, toolbar:'#switchAdmin'}
	      ,{field: 'accountBmikece', title: '账户余额', width: 130, sort: true}
	      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
	    ]]
	  });
	  
	  
	  
	//自定义添加的验证规则，自带有phone，decimal
      form.verify({
          decimal:[/^[0-9]+([.]{1}[0-9]+){0,1}$/, '只能为小数或整数'],//验证价格
          number:[/^\d{5,10}$/,'只能为整数长度在5到10位'],//验证数值
          age: [/^([1-9][0-9]{0,1}|100)$/, '年龄必须为100以内']//验证年龄
      });
	  
	  
	  
	//监听提交[搜索]
	  form.on('submit(serchBtn)', function(data){
	    //console.log(data.field);  //可以得到相关的参数值
	    //我们需要带着这些参数，重载一下表格就ok
	    table.reload('showAll', {
		  where: { //设定异步数据接口的额外参数，任意设
		    name: data.field.name
		    ,gender: data.field.gender
		    ,isAdmin: data.field.isAdmin
		    //…
		  }
		  ,page: {
		    curr: 1 //重新从第 1 页开始
		  }
		}); //只重载数据
	  });
	  
	  // 处理开关点击时把信息传入到后台进行修改
      form.on('switch(isLockSwitch)', function (data) {
          var id = $(this).attr('data-id');//获得当前点击对象的id值
          var valid = this.checked ? 'on' : 'off';//获取到点击后的开关状态（on/off）
          var x=data.elem.checked;//获取到点击后的开关状态（true/false）
          layer.open({
              content: '确定要修改账号状态吗？'//给用户的友好提示
              ,btn: ['确定', '取消']
              ,yes: function(index, layero){
                  data.elem.checked=x;
                  layer.close(index);
                  $.ajax({
                      type : "POST",
                      url : "<%=basePath %>back/editUserIsLockById/"+id+"/"+valid,
                      data : {},/*"id" : id , "valid" : valid*/
                      success : function(res) {
                          if(res){
                              layer.msg("修改成功！");
                          }else{
                              layer.msg("修改失败！");
                          }
                          form.render();
                      },
                      error : function() {
                      }
                  });
              }
              ,btn2: function(index, layero){
                  //按钮【按钮二】的回调
                  data.elem.checked=!x;
                  form.render();
                  layer.close(index);
                  //return false 开启该代码可禁止点击该按钮关闭
              }
              ,cancel: function(){
                  //右上角关闭回调
                  data.elem.checked=!x;
                  form.render();
                  //return false 开启该代码可禁止点击该按钮关闭
              }
          });
          form.render();
          return false;

      });
	  // 处理开关点击时把信息传入到后台进行修改
      form.on('switch(isAdminSwitch)', function (data) {
          var id = $(this).attr('data-id');//获得当前点击对象的id值
          var valid = this.checked ? 'on' : 'off';//获取到点击后的开关状态（on/off）
          var x=data.elem.checked;//获取到点击后的开关状态（true/false）
          layer.open({
              content: '确定要修改账号状态吗？'//给用户的友好提示
              ,btn: ['确定', '取消']
              ,yes: function(index, layero){
                  data.elem.checked=x;
                  layer.close(index);
                  $.ajax({
                      type : "POST",
                      url : "<%=basePath %>back/editUserAdminStatusById/"+id+"/"+valid,
                      data : {},/*"id" : id , "valid" : valid*/
                      success : function(res) {
                          if(res=="true"){
                              layer.msg("修改成功！");
                          }else{
                              layer.msg("修改失败！");
                          }
                          form.render();
                      },
                      error : function() {
                      }
                  });
              }
              ,btn2: function(index, layero){
                  //按钮【按钮二】的回调
                  data.elem.checked=!x;
                  form.render();
                  layer.close(index);
                  //return false 开启该代码可禁止点击该按钮关闭
              }
              ,cancel: function(){
                  //右上角关闭回调
                  data.elem.checked=!x;
                  form.render();
                  //return false 开启该代码可禁止点击该按钮关闭
              }
          });
          form.render();
          return false;
      });
	  
	  
	  
	  
	  
	//头工具栏事件
	  table.on('toolbar(test)', function(obj){
		console.log(obj);
	    var checkStatus = table.checkStatus(obj.config.id);
	    switch(obj.event){
	      case 'add':
	        /* var data = checkStatus.data;
	        layer.alert(JSON.stringify(data)); */
	        layer.open({
	        	  type: 1,
	        	  title:"添加页面",
	        	  area: ['600px', '600px'],
	        	  content: $('#A_form') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
	        	});
	        
	      break;
	      case 'delAll':
	    	  var data = checkStatus.data;
	    	  if(data.length > 0){
	    		  layer.confirm('真的删除行这'+data.length+'行么', function(index){
	  	  	        var ids = "";
	  	  	        //通过循环将选中的id，用逗号拼接成一个字符串，例如：1，2，3，
	   	  	        for(var i =0; i<data.length; i++){
	  	  	        	ids += data[i].id+",";
	  	  	        }
	  	  	        
	  	  	        $.get("<%=basePath%>back/queryAllOrderInfoByUserIds",{
	  	  	        	ids:ids
	  	  	        },function(res){
	  	  	        	if(res){//有订单就不能直接删除用户
	  	  	        		layer.msg("有些用户下已有订单无法直接删除！");
	  	  	        	}else{
		  	  	        	$.post("<%=basePath%>back/delAllUserByIds",{
			  	  	        	ids:ids
			  	  	        },function(res){
			  	  	        	if(res){
			  	  	        		layer.msg("删除成功");
			  	  	        		layer.closeAll('page');
			  	  	        		table.reload('showAll', {
			  	  		    			  where: { //设定异步数据接口的额外参数，任意设
			  	  		    			  }
			  	  		    			  ,page: {
			  	  		    			    curr: currNow //获取当前的页码
			  	  		    			  }
			  	  		    			}); //只重载数据
			  	  	        	}else{
			  	  	        		layer.msg("删除失败");
			  	  	        		layer.closeAll('page');
			  	  	        	}
			  	  	        },'json');
	  	  	        	}
	  	  	        });
	  	  	        
	  	    	  })
	    	  }else{
	    		  layer.msg("你还未选中要删除的行！");
	    	  }
	      break;
	    };
	  });
	  
	  //监听行工具事件
	  table.on('tool(test)', function(obj){
	    var data = obj.data;  //当前行的所有数据
	    console.log(obj)
	    if(obj.event === 'del'){
	      layer.confirm('真的删除行么', function(index){
	       /*  obj.del();
	        layer.close(index); */
	        //点击确定按钮的时候才会进来
	        var id = obj.data.id;
	        $.get("<%=basePath%>back/queryAllOrderInfoByUserIds",{
	  	        	ids:id
	  	        },function(res){
	  	        	if(res){//有订单就不能直接删除用户
	  	        		layer.msg("有些用户下已有订单无法直接删除！");
	  	        	}else{
	  	  	        	$.post("<%=basePath%>back/delAllUserByIds",{
		  	  	        	ids:id
		  	  	        },function(res){
		  	  	        	if(res){
		  	  	        		layer.msg("删除成功");
		  	  	        		layer.closeAll('page');
		  	  	        		table.reload('showAll', {
		  	  		    			  where: { //设定异步数据接口的额外参数，任意设
		  	  		    			  }
		  	  		    			  ,page: {
		  	  		    			    curr: currNow //获取当前的页码
		  	  		    			  }
		  	  		    			}); //只重载数据
		  	  	        	}else{
		  	  	        		layer.msg("删除失败");
		  	  	        		layer.closeAll('page');
		  	  	        	}
		  	  	        },'json');
	  	        	}
	  	        });
	      });
	    } else if(obj.event === 'edit'){
	    	//当点击的该行是人管理员才能进行基础的修改如不是不能修改
			if(data.isAdmin==1){
				layer.open({
		        	  type: 1,
		        	  title:"修改页面",
		        	  area: ['600px', '600px'],
		        	  content: $('#U_form') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
		         });
		    	//要给修改的表单回显数据
		    	 form.val('U_form', data);
		    	//data
		    	 $("#U_date").val("");
			}else{
				layer.msg("不能修改用户的信息！");
			}	    	
			    	 
		    //form.render('select');
	    }
	  });
	  
	  //监听提交[添加按钮]
	  form.on('submit(addBtn)', function(data){
	    //console.log(data);  //可以得到添加表单中文本框的值
	    //我们 需要发送一个请求，带上我们的参数。
	    $.post("<%=basePath%>back/addUser",{
	    	name:data.field.name,
	    	gender:data.field.gender,
	    	birthday:data.field.birthday,
	    	img:data.field.img,
	    	phone:data.field.phone,
	    	loginPassword:data.field.loginPassword,
	    	isAdminStatus:data.field.isAdmin,
	    	payPassword:data.field.payPassword,
	    },function(res){
	    	if(res){
	    		layer.close(layer.index);
	    		layer.msg("添加成功");
	    		layer.closeAll('page');
	    		table.reload('showAll', {
	    			  where: { //设定异步数据接口的额外参数，任意设
	    			  }
	    			  ,page: {
	    			    curr: 1 //重新从第 1 页开始
	    			  }
	    			}); //只重载数据
	    		//将表单中的数据进行清空【js的reset方法】
	    		$("#A_form")[0].reset();
	    	}else{
	    		layer.close(layer.index);
	    		layer.msg("添加失败");
	    		layer.closeAll('page');
	    		$("#A_form")[0].reset();
	    	}
	    },'json');
	    
	    
	  });
	  
	  
	//当点击重置密码时执行
	//resetPasswordBtn,reset_password
	  $("#resetPasswordBtn").click(function(){
	    	layer.confirm('确认要进行重置密码吗', function(index){
	    		layer.msg("重置密码成功!");
				$("#reset_password").val("12345");		
	    	})
	  });
	  
	  //监听提交[修改按钮]
	  form.on('submit(updateBtn)', function(data){
	    //console.log(data);  //可以得到添加表单中文本框的值
	    //我们 需要发送一个请求，带上我们的参数。
	    $.post("<%=basePath%>back/editUserById",{
	    	id:data.field.id,
	    	name:data.field.name,
	    	gender:data.field.gender,
	    	loginPassword:data.field.loginPassword,
	    	birthday:data.field.birthday,
	    	img:data.field.img,
	    	phone:data.field.phone,
	    	isAdminStatus:data.field.isAdmin,
	    },function(res){
	    	if(res){
	    		layer.close(layer.index);
	    		layer.msg("修改成功");
	    		layer.closeAll('page');
	    		table.reload('showAll', {
	    			  where: { //设定异步数据接口的额外参数，任意设
	    			  }
	    			  ,page: {
	    			    curr: currNow //重新从第 1 页开始
	    			  }
	    			}); //只重载数据
	    		//将表单中的数据进行清空【js的reset方法】
	    		$("#U_form")[0].reset();
	    	}else{
	    		layer.close(layer.index);
	    		layer.msg("修改失败");
	    		layer.closeAll('page');
	    		$("#U_form")[0].reset();
	    	}
	    	
	    },'json');
	    
	    
	  });
	  
	  //添加表单中的图片上传
	  //执行实例
	  var uploadInst = upload.render({
	    elem: '#A_imgUpload' //绑定元素
	    ,url: '<%=basePath%>upload/img' //上传接口
	    ,done: function(res){
	      //上传完毕回调
	      //console.log(res);  //可以获取到响应过来图片路径
	      //把路径添加到文本框
	      $("#A_img").val(res.data);
	      
	    }
	    ,error: function(){
	      //请求异常回调
	    }
	  });
	  //修改表单中的图片上传
	  //执行实例
	  var uploadInst = upload.render({
	    elem: '#U_imgUpload' //绑定元素
	    ,url: '<%=basePath%>upload/img' //上传接口
	    ,done: function(res){
	      //上传完毕回调
	      //console.log(res);  //可以获取到响应过来图片路径
	      //把路径添加到文本框
	      $("#U_img").val(res.data);
	      
	    }
	    ,error: function(){
	      //请求异常回调
	    }
	  });
	  
	});


</script>
</body>
</html>